<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://at.alicdn.com/t/c/font_4655802_oqrtbaq4xvm.css">
</head>
<style>
    #app{
        width: 800px;
        height: 750px;
        margin: 0 auto;
        border: 1px solid red;
        padding:20px;
    }
    hr{
        border: 1px dashed gainsboro;
    }
   #xingxing span{
    margin-right: 5px;
   }
   .red{
    color: red;
    display: inline-block;
   }
   .red1{
    color: red;
    display: inline-block;
   }
   #a2{
    height: 40px;
    line-height: 40px;
    padding-left: 20px;
    background-color: rgb(242, 242, 242);
   }
   .b1{
    width: 150px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    border: 1px solid rgb(226, 226, 226);
    margin-right: 20px;
    margin-bottom: 20px;
    position: relative;
   }
   #a3{
    display: flex;
    flex-wrap: wrap;
    margin-top: 20px;
   
    
   }
   .border{
    border: 1px solid red;
   }
   .checkmark {
        position: absolute;
        bottom: -12px;
        right: 1px;
        font-size: 20px;
        color: red;
    }
    textarea{
        width: 100%;
        height: 300px;
        border: 1px solid rgb(226, 226, 226);
    }
    .c1{
        position: relative;
    }
    .queren{
        width: 150px;
        height: 50px;
        line-height: 50px;
        text-align: center;
        color: white;
        background-color: red;
        opacity: 0.6;
        border-radius: 10px;
        float: right;
    }
    .thank{
        width: 300px;
        height: 60px;
        background-color: gray;
        opacity: 0.9;
        color: aliceblue;
        border-radius: 10px;
        line-height: 60px;
        text-align: center;
        position: fixed;
        top: 300px;
        left: 600px;
    }
    .aa{
        position:absolute;
        right: 50px;
        bottom: 5px;
        font-size: 10px;
    }
</style>
<body>
    <div id="app">
       <h3>给“新闻订单”的评价</h3>
       <hr >
       <p>请严肃认真对待此次评价哦！您的评价对我们真的真的非常重要！</p> 
         <div id="xingxing">
                    <span class="iconfont icon-huisewujiaoxing" @click="add(1)" :class="{'red':num>=1,'red1':num1>=1}"  @mouseenter="hover(1)" @mouseleave="leave(1)"></span>
                    <span class="iconfont icon-huisewujiaoxing" @click="add(2)" :class="{'red':num>=2,'red1':num1>=2}" @mouseenter="hover(2)" @mouseleave="leave(2)"></span>
                    <span class="iconfont icon-huisewujiaoxing" @click="add(3)" :class="{'red':num>=3,'red1':num1>=3}" @mouseenter="hover(3)" @mouseleave="leave(3)"></span>
                    <span class="iconfont icon-huisewujiaoxing" @click="add(4)" :class="{'red':num>=4,'red1':num1>=4}" @mouseenter="hover(4)" @mouseleave="leave(4)"></span>
                    <span class="iconfont icon-huisewujiaoxing" @click="add(5)" :class="{'red':num>=5,'red1':num1>=5}" @mouseenter="hover(5)" @mouseleave="leave(5)"></span>
                    <span v-if="num > 0||num1>0" class="red">{{ grade() }}</span>
                </div>
                <div id="a2">
                    本次交易，乖，摸摸头 给您留下了什么印象呢？
                </div>
                <div id="a3">
                    <div v-for="(item,index) in list" class="b1" @click="dianji(index)" :class="{'border':number===index}">{{item}}
                        <span v-if="number === index" class="checkmark">√</span>
                    </div>
                </div>
                <div class="c1">
                <textarea v-model="text" @input="much">
                   
                </textarea>
                <p v-if="text.length <= total" class="aa">还可以输入{{shengyu}}个字</p>
            </div>
                <div class="queren" @click="show=!show">评价完成</div>
                <div class="thank" v-if="show">感谢您的评价！么么哒(* ￣3)(ε￣ *)</div>
        </div>
          
</body>
<script src="vue.js"></script>
<script>
    const{createApp,ref}=Vue;
  createApp({
        setup(){
            let num=ref(0);
            let num1=ref(0);
            let number=ref('')
            let show=ref(false);
            function add(index){
                 num.value=index
            }
            function hover(index1){
                num1.value=index1;
              
            }
            function leave() {
                }
            function grade(){
                if(num.value===1||num1.value===1){
                    return '差评'
                }else if(num.value===2||num1.value===2){
                    return '较差'
                }else if(num.value===3||num1.value===3){
                    return '中等'
                }else if(num.value===4||num1.value===4){
                    return '一般'
                }else if(num.value===5||num1.value===5){
                    return '好评'
                }
            }
            function dianji(index){
                  number.value=index
            }
            let list=ref(['专业水平高','交付准时','效果明显','数据分析准确','能力待提高','工期延误']);
            let text = ref('');
          let total = 140;
          let shengyu = ref(total - text.value.length);
          function much() {
           text.value = text.value.slice(0, total);
           shengyu.value = total - text.value.length;
      };
            return{
                num,
                show,
                add,
                hover,
                leave,
                grade,
                list,
                dianji,
                number,
                num1,
                text,
                shengyu,
                much,
                total
               
                
                
            }
        }
    }).mount('#app')
</script>
</html>
